<template>
  <view>
    <UniversalLayout :activeNav="activeNav" :activeSidebar="activeSidebar" @nav-change="handleNavChange"
      @sidebar-change="handleSidebarChange">
      <view class="page-content">
        <!-- 首页内容 (默认内容) -->
        <view v-show="activeNav === 'dashboard'">
          <view class="welcome-section">
            <text class="welcome-title">欢迎使用</text>
            <text class="welcome-desc">这个网站在PC和移动端都能良好展示</text>
          </view>
        </view>

        <!-- 数据展示内容 -->
        <view v-show="activeNav === 'dataDisplay'" >
          <DataDisplay />
        </view>

        <!-- 实时数据内容 -->
        <view v-show="activeNav === 'realTimeData'" >
          <RealTimeData @goToDataRoom="goToDataRoom" />
        </view>
        <view v-show="activeNav === 'DataRoom'">
          <DataRoom></DataRoom>
        </view>
        <!-- 历史数据内容 -->
        <view v-show="activeNav === 'historyData'" >
          <HistoryData />
        </view>

        <!-- 数据比较内容 -->
        <view v-show="activeNav === 'dataCompare'" >
          <CompareData />
        </view>

        <!-- 错误信息内容 -->
        <view v-show="activeNav === 'errorMessege'" >
          <ErrorMessege />
        </view>

        <!-- 指令管理内容 -->
        <view v-show="activeNav === 'derectiveManege'" >
          <DirectiveManege />
        </view>
      </view>
    </UniversalLayout>
  </view>
</template>

<script>
import UniversalLayout from '@/components/UniversalLayout/UniversalLayout.vue'
import DataDisplay from './src/dataDisplay/dataDisplay.vue'
import RealTimeData from './src/realTimeData/realTimeData.vue'
import HistoryData from './src/historyData/historyData.vue'
import CompareData from './src/dataCompare/dataCompare.vue'
import ErrorMessege from './src/errorMessege/errorMessege.vue'
import DirectiveManege from './src/derectiveManege/derectiveManege.vue'
import DataRoom from './src/realTimeData/src/dataRoom.vue'
export default {
  components: {
    UniversalLayout,
    DataDisplay,
    RealTimeData,
    HistoryData,
    CompareData,
    ErrorMessege,
    DirectiveManege,
    DataRoom
  },
  data() {
    return {
      activeNav: 'dashboard',
    }
  },
  methods: {
    handleNavChange(key) {
      this.activeNav = key
      console.log('导航切换到:', key)
      // 这里可以处理导航切换逻辑
    },
    
    handleSidebarChange(key) {
      this.activeNav = key
      console.log('侧边栏切换到:', key)
      // 不再跳转页面，而是在当前页面显示不同内容
    },
    
    goToDataRoom(key) {
      console.log('gotodataroom');
      
     this.activeNav=key
    }
  }
}
</script>

<style scoped>
.page-content {
  padding: 20rpx;
}

.content-header {
  text-align: center;
  padding: 40rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  color: white;
}

.content-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.content-desc {
  font-size: 28rpx;
}

.welcome-section {
  text-align: center;
  padding: 40rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  color: white;
}

.welcome-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.welcome-desc {
  font-size: 28rpx;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.feature-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto 20rpx;
}

.feature-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 15rpx;
}

.feature-desc {
  font-size: 26rpx;
  color: #666;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 30rpx;
  text-align: center;
}

.demo-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.demo-item {
  flex: 1;
  min-width: 200rpx;
}

.demo-box {
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  color: white;
  font-weight: bold;
}

.demo-box-1 {
  background: linear-gradient(45deg, #FF6B6B, #FF8E53);
}

.demo-box-2 {
  background: linear-gradient(45deg, #4ECDC4, #556270);
}

.demo-box-3 {
  background: linear-gradient(45deg, #45B7D1, #96C93D);
}

.demo-box-4 {
  background: linear-gradient(45deg, #9D50BB, #6E48AA);
}

.demo-text {
  font-size: 24rpx;
  text-align: center;
}

/* 数据展示样式 */
.data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.data-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 15rpx;
}

.card-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #999;
}

.chart-container {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.chart-placeholder {
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 10rpx;
  color: #999;
}

/* 实时数据样式 */
.realtime-list {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.realtime-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.realtime-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 28rpx;
  color: #666;
}

.item-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

/* 历史数据样式 */
.history-table {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.table-header {
  display: flex;
  background: #f5f5f5;
  padding: 20rpx;
}

.header-cell {
  flex: 1;
  font-weight: bold;
  text-align: center;
}

.table-row {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
}

/* 错误信息样式 */
.error-list {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.error-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.error-item:last-child {
  border-bottom: none;
}

.error-time {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.error-message {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin: 10rpx 0;
}

.error-status {
  font-size: 24rpx;
  color: #ff6b6b;
}

/* 指令管理样式 */
.directive-list {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.directive-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.directive-item:last-child {
  border-bottom: none;
}

.directive-name {
  font-size: 28rpx;
  font-weight: bold;
  flex: 1;
}

.directive-desc {
  font-size: 26rpx;
  color: #666;
  flex: 2;
}

.execute-btn {
  background: #007AFF;
  color: white;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
}
</style>